import React, { useRef } from 'react';
import Audio from './index';
import { Button } from 'antd';

const Demo =  () => {
  const audioRef = useRef<any>(null!);
  const apiPrefixUri = '';

  const apiMapping: any = {
    streamInfo: {
      url: '',
      params: {}
    },
    timeline: {
      url: '',
      params: {}
    },
    queryVoiceInfo: {
      url: '',
      params: {}
    },
    upsertVoiceMarkInfo: {
      url: '',
      params: {}
    },
    deleteVoiceMarkInfo: {
      url: '',
      params: {}
    }
  };

  const onAudioPlaying = (ev: any) => {
    console.log('onAudioPlaying', ev);
  };

  const onAudioJump = (ev: any) => {
    console.log('onAudioJump', ev);
  };

  const onAudioPlayOrPause = (status: any) => {
    console.log('status', status);
  };

  // 1~100的值
  const onAudioVolumeChange = (number: any) => {
    console.log('volume', number);
  };

  const onReady = (ev: any) => {
    console.log(ev); // 布尔值
  };

  const onClickRecord = (desc: any) => {
    console.log(desc);
  };

  const onAudioTimeLineClick = (ev: any) => {
    console.log('timeLineClick', ev);
  };

  const onAudioJumpButtonClick = (ev: any) => {
    console.log('jumpButtonClick', ev);
  };

  const onClickPlayBtn = (status: any) => {
    console.log('Click play btn, current playing status is', status);
  };

  return (
    <>
      <Button
        onClick={() => {
          audioRef?.current?.setAudioCurrentTime('2021-10-14 15:32:09', false);
        }}
      >
        Jump to 2021-10-14 15:32:09
      </Button>
      <Button
        onClick={() => {
          audioRef?.current?.setAudioPlayingStatus('play');
        }}
      >
        play
      </Button>
      <Button
        onClick={() => {
          audioRef?.current?.setAudioPlayingStatus('pause');
        }}
      >
        pause
      </Button>
      <Button
        onClick={() => {
          audioRef?.current?.setAudioVolume(50);
        }}
      >
        set volume 50
      </Button>
      <Audio
        ref={audioRef}
        apiParams={{
          username: 'unluna',
          orderId: 1,
          productId: 1,
          district: 1,
          caller: 'se-gwork',
          test: 'abc'
        }}
        apiPrefixUri={apiPrefixUri}
        apiMapping={apiMapping}
        onAudioPlaying={onAudioPlaying}
        onAudioJump={onAudioJump}
        onClickRecord={onClickRecord}
        onAudioPlayOrPause={onAudioPlayOrPause}
        onAudioVolumeChange={onAudioVolumeChange}
        onAudioTimeLineClick={onAudioTimeLineClick}
        onAudioJumpButtonClick={onAudioJumpButtonClick}
        onClickPlayBtn={onClickPlayBtn}
        onReady={onReady}
        markListWidth="200px"
      />
    </>
  );
};

export default Demo;